iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Vue.js

重新認識 Vue.js系列 第 21

重新認識 Vue.js Day21:Ref 和 Reactive

  • 分享至 

  • xImage
  •  

在 Vue3 當中,提供了兩個宣告響應式物件的屬性 Ref 和 Reactive ,其中 Reactive 只可以接受物件型別(包含陣列),若使用其他型別的內容會噴錯

Reactive

Reactive 本身透過 proxy 來實作,會回傳一個 proxy 物件,並且由於是透過 proxy 物件操作的,因此我們的操作都是透過 proxy 來進行的,若改變 Reactive 物件會使其消失響應性

Ref

ref 基本上是用來處理基本型別的內容,但他也可以塞物件進去(基於 reactive 的轉換),那 ref 的大概概念為將內容塞到 reflmpl 物件內的 value 屬性,並且針對此 value 進行 getter 與 setter 的設定,也因為是 getter 與 setter 的設定,因此若透過 watch 來監測 ref 的物件除非透過深層搜尋,不然是監測不到深層內容更改的

用法

當我們要使用 reactive 時非常的直覺

const obj = reactive({a: 1})
obj.a = 2;

然而我們要使用 ref 的時候需要操作他的 value

const name = ref('leo');
name.value = 'leo2'

大致上 ref 與 reactive 的使用時機其實也沒有到特別死,甚至有一派的說法是不想額外思考就全用 ref ,這招特別好用,當然,具體上還是根據需要使用到的內容來選擇會比較好,今天的內容到此結束,讓我們明天見


上一篇
重新認識 Vue.js Day20:Proxy 與 Reflect
下一篇
重新認識 Vue.js Day22: Vue3 的 watch
系列文
重新認識 Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言